<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>作品详情 - 数智化赋能“微情境·微宣讲”红色实践活动</title>

  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
  <!-- 引入Tailwind CSS -->
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
  <!-- 引入Font Awesome -->
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="../templates/h5/assets/jquery.min.js"></script>
  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }
      
      /* 内容区块样式 */
      .content-section {
        @apply bg-red-800 rounded-lg p-4 mb-4 border border-red-700;
      }
      
      /* 视频容器样式 */
      .video-container {
        @apply relative w-full bg-red-900 rounded-lg overflow-hidden mb-4;
        padding-top: 56.25%; /* 16:9比例 */
      }
      .video-placeholder {
        @apply absolute inset-0 flex items-center justify-center;
      }
      
      /* 评分标签样式 */
      .score-tag {
        @apply bg-red-900 px-2 py-1 rounded text-sm inline-flex items-center mr-2 mb-2;
      }
      .edit-btn {
        @apply ml-1 text-secondary text-xs cursor-pointer hover:opacity-80;
      }
      
      /* 互动按钮样式 */
      .action-btn {
        @apply flex flex-col items-center justify-center text-gray-200;
      }
      .action-btn.active {
        @apply text-secondary;
      }
      .action-icon {
        @apply text-lg mb-1;
      }
      .action-text {
        @apply text-xs;
      }
      
      /* 评论样式 */
      .comment-item {
        @apply border-b border-red-700 pb-3 mb-3 last:border-0 last:pb-0 last:mb-0;
      }
      .comment-avatar {
        @apply w-8 h-8 rounded-full bg-red-700 flex items-center justify-center text-xs mr-2;
      }
      
      /* 弹窗样式 */
      .modal-overlay {
        @apply fixed inset-0 bg-black/70 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300;
      }
      .modal-overlay.active {
        @apply opacity-100 pointer-events-auto;
      }
      .modal-container {
        @apply bg-red-800 border border-red-700 rounded-xl w-11/12 max-w-sm transform scale-95 transition-transform duration-300;
      }
      .modal-overlay.active .modal-container {
        @apply scale-100;
      }
      .modal-header {
        @apply border-b border-red-700 px-5 py-4 flex justify-between items-center;
      }
      .modal-body {
        @apply px-5 py-4;
      }
      .modal-footer {
        @apply border-t border-red-700 px-5 py-3 flex justify-end gap-2;
      }
      .score-input {
        @apply w-full bg-red-900 border border-red-700 rounded-lg px-3 py-2 text-white mt-2 focus:outline-none focus:border-secondary;
      }
      .modal-note {
        @apply text-xs text-gray-300 mt-2 italic;
      }
      .btn-primary {
        @apply bg-secondary text-red-900 px-4 py-1.5 rounded-lg text-sm font-medium hover:bg-secondary/90 transition-colors;
      }
      .btn-secondary {
        @apply bg-red-900 text-white px-4 py-1.5 rounded-lg text-sm font-medium hover:bg-red-700 transition-colors;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
  <div class="max-w-md mx-auto min-h-screen flex flex-col">
    <!-- 页面标题栏 -->
    <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-between items-center">
      <a href="#" class="text-white"><i class="fa fa-arrow-left"></i></a>
      <h1 class="text-xl font-bold">作品详情</h1>
      <a href="#" class="text-white"><i class="fa fa-share-alt"></i></a>
    </div>
    
    <!-- 页面内容区 -->
    <div class="flex-1 overflow-y-auto p-4 pb-24">
      <!-- 作品基本信息 -->
      <div class="content-section pb-3">
        <div class="flex justify-between items-start mb-3">
          <div>
            <span class="text-xs bg-red-900 px-2 py-0.5 rounded">序号: #2023048</span>
            <h2 class="text-lg font-bold mt-1">《红色记忆》</h2>
          </div>
          <span class="bg-secondary text-red-900 text-xs px-2 py-1 rounded-full font-medium">
            综合排名: 第1名
          </span>
        </div>
        
        <!-- 作品封面（已添加懒加载属性） -->
        <div class="w-full rounded-lg overflow-hidden mb-3">
          <img src="https://picsum.photos/800/450?random=10" alt="作品封面" class="w-full" loading="lazy">
        </div>
        
        <!-- 评分信息 -->
        <div>
          <div class="flex flex-wrap">
            <div class="score-tag">
              <i class="fa fa-star text-secondary mr-1"></i>综合得分: 98.5
            </div>
            <div class="score-tag">
              <i class="fa fa-users text-secondary mr-1"></i>学生评分: 97.2
              <span class="edit-btn" data-type="student" id="editStudentScore"><i class="fa fa-pencil"></i></span>
            </div>
            <div class="score-tag">
              <i class="fa fa-graduation-cap text-secondary mr-1"></i>教师评分: 99.0
              <span class="edit-btn" data-type="teacher" id="editTeacherScore"><i class="fa fa-pencil"></i></span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 微情境视频 -->
      <div class="content-section">
        <h3 class="text-base font-medium mb-3 flex items-center">
          <i class="fa fa-film text-secondary mr-2"></i>微情境视频
        </h3>
        <div class="video-container">
          <div class="video-placeholder">
            <button class="w-14 h-14 rounded-full bg-secondary/90 text-red-900 flex items-center justify-center">
              <i class="fa fa-play text-xl"></i>
            </button>
          </div>
        </div>
        <p class="text-xs text-gray-300 text-center">点击播放 (时长: 4分25秒)</p>
      </div>
      
      <!-- 微宣讲视频 -->
      <div class="content-section">
        <h3 class="text-base font-medium mb-3 flex items-center">
          <i class="fa fa-video-camera text-secondary mr-2"></i>微宣讲视频
        </h3>
        <div class="video-container">
          <div class="video-placeholder">
            <button class="w-14 h-14 rounded-full bg-secondary/90 text-red-900 flex items-center justify-center">
              <i class="fa fa-play text-xl"></i>
            </button>
          </div>
        </div>
        <p class="text-xs text-gray-300 text-center">点击播放 (时长: 3分48秒)</p>
      </div>
      
      <!-- 作品数据与互动 -->
      <div class="content-section">
        <div class="flex justify-around py-2">
          <button class="action-btn" id="likeBtn">
            <i class="action-icon fa fa-thumbs-up"></i>
            <span class="action-text">点赞 (8542)</span>
          </button>
          <button class="action-btn">
            <i class="action-icon fa fa-eye"></i>
            <span class="action-text">浏览 (24631)</span>
          </button>
          <button class="action-btn" id="shareBtn">
            <i class="action-icon fa fa-share"></i>
            <span class="action-text">转发 (1256)</span>
          </button>
        </div>
      </div>
      
      <!-- 在线评论 -->
      <div class="content-section">
        <h3 class="text-base font-medium mb-3 flex items-center">
          <i class="fa fa-comments text-secondary mr-2"></i>在线评论 (156)
        </h3>
        
        <!-- 评论输入框 -->
        <div class="flex mb-4">
          <div class="comment-avatar">
            <i class="fa fa-user"></i>
          </div>
          <div class="flex-1">
            <input type="text" placeholder="发表你的看法..." class="w-full bg-red-900 border border-red-700 rounded-full px-3 py-2 text-sm focus:outline-none focus:border-secondary">
          </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comment-list">
          <!-- 评论1 -->
          <div class="comment-item">
            <div class="flex">
              <div class="comment-avatar">
                <span>张</span>
              </div>
              <div class="flex-1">
                <div class="flex justify-between">
                  <div class="font-medium text-sm">张明</div>
                  <div class="text-xs text-gray-400">2天前</div>
                </div>
                <p class="text-sm mt-1">作品非常感人，让我深刻理解了革命先辈的奋斗精神，值得我们学习和传承。</p>
                <div class="flex mt-2 text-xs text-gray-400">
                  <button class="flex items-center mr-3"><i class="fa fa-thumbs-up mr-1"></i> 128</button>
                  <button>回复</button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 评论2 -->
          <div class="comment-item">
            <div class="flex">
              <div class="comment-avatar">
                <span>李</span>
              </div>
              <div class="flex-1">
                <div class="flex justify-between">
                  <div class="font-medium text-sm">李老师</div>
                  <div class="text-xs text-gray-400">3天前</div>
                </div>
                <p class="text-sm mt-1">作为一名教师，我认为这个作品非常适合作为青少年爱国主义教育的素材，内容积极向上，表现形式新颖。</p>
                <div class="flex mt-2 text-xs text-gray-400">
                  <button class="flex items-center mr-3"><i class="fa fa-thumbs-up mr-1"></i> 96</button>
                  <button>回复</button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 评论3 -->
          <div class="comment-item">
            <div class="flex">
              <div class="comment-avatar">
                <span>王</span>
              </div>
              <div class="flex-1">
                <div class="flex justify-between">
                  <div class="font-medium text-sm">王丽</div>
                  <div class="text-xs text-gray-400">5天前</div>
                </div>
                <p class="text-sm mt-1">视频拍摄质量很高，演员的表演也很到位，特别是结尾部分很有感染力，看完之后很受触动。</p>
                <div class="flex mt-2 text-xs text-gray-400">
                  <button class="flex items-center mr-3"><i class="fa fa-thumbs-up mr-1"></i> 75</button>
                  <button>回复</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载更多评论 -->
        <button class="w-full mt-3 py-2 text-sm border border-red-700 rounded-full hover:bg-red-900 transition-colors">
          加载更多评论
        </button>
      </div>
    </div>
    
    <!-- 底部固定导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
      <a href="/h5/index" class="nav-item active flex-1">
        <i class="nav-icon fa fa-home"></i>
        <span class="nav-text">首页</span>
      </a>
      <a href="/h5/index_huodong" class="nav-item flex-1">
        <i class="nav-icon fa fa-calendar"></i>
        <span class="nav-text">活动</span>
      </a>
      <a href="/h5/index_paihangbang" class="nav-item flex-1">
        <i class="nav-icon fa fa-bar-chart"></i>
        <span class="nav-text">排行榜</span>
      </a>
      <a href="/h5/index_yonghu" class="nav-item flex-1">
        <i class="nav-icon fa fa-user"></i>
        <span class="nav-text">我的</span>
      </a>
    </div>
  </div>
  
  <!-- 评分编辑弹窗 -->
  <div class="modal-overlay" id="scoreModal">
    <div class="modal-container">
      <div class="modal-header">
        <h3 class="font-bold text-base" id="modalTitle">编辑评分</h3>
        <button class="text-gray-300 hover:text-white" id="closeModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <p>请输入评分（1-100分）</p>
        <input type="number" min="1" max="100" step="0.1" class="score-input" id="scoreInput">
        <p class="modal-note" id="modalNote">
          提示：每个用户只能为同一作品评分一次
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="cancelBtn">取消</button>
        <button class="btn-primary" id="nextConfirmBtn">下一步</button>
      </div>
    </div>
  </div>

  <!-- 评分二次确认弹窗 -->
  <div class="modal-overlay" id="scoreConfirmModal">
    <div class="modal-container">
      <div class="modal-header">
        <h3 class="font-bold text-base">确认评分</h3>
        <button class="text-gray-300 hover:text-white" id="closeScoreConfirmModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body text-center py-4">
        <i class="fa fa-exclamation-circle text-secondary text-2xl mb-3"></i>
        <p class="mb-2">您确定要提交这个评分吗？</p>
        <p class="text-sm">请确认无误后再提交，提交后无法修改</p>
        <p class="mt-3 font-medium" id="confirmScoreDisplay">学生评分: 97.2</p>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="goBackBtn">返回修改</button>
        <button class="btn-primary" id="finalConfirmBtn">确认提交</button>
      </div>
    </div>
  </div>

  <!-- 验证码弹窗 -->
  <div class="modal-overlay" id="verifyModal">
    <div class="modal-container">
      <div class="modal-header">
        <h3 class="font-bold text-base">验证身份</h3>
        <button class="text-gray-300 hover:text-white" id="closeVerifyModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <p class="mb-2">请输入右侧验证码完成点赞</p>
        <!-- 验证码容器 -->
        <div class="flex gap-3 items-center mb-2">
          <input type="text" placeholder="输入4位验证码" class="score-input w-1/2" id="verifyCodeInput" maxlength="4">
          <div class="w-1/2 h-10 bg-red-900 rounded-lg flex items-center justify-center text-secondary font-mono text-lg" id="verifyCodeBox">
            <!-- 验证码将通过JS生成 -->
          </div>
          <button class="text-xs text-gray-300 ml-1" id="refreshVerifyCode">
            <i class="fa fa-refresh"></i> 刷新
          </button>
        </div>
        <p class="modal-note text-red-300 hidden" id="verifyError">
          验证码错误，请重新输入
        </p>
      </div>
      <div class="modal-footer">
        <button class="btn-secondary" id="cancelVerifyBtn">取消</button>
        <button class="btn-primary" id="confirmVerifyBtn">确认点赞</button>
      </div>
    </div>
  </div>

  <!-- 转发提示弹窗 -->
  <div class="modal-overlay" id="shareTipModal">
    <div class="modal-container">
      <div class="modal-header">
        <h3 class="font-bold text-base">转发作品</h3>
        <button class="text-gray-300 hover:text-white" id="closeShareTipModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body text-center">
        <i class="fa fa-wechat text-4xl text-green-400 mb-4"></i>
        <p class="mb-2">请通过微信右上角「三个点」转发</p>
        <p class="text-xs text-gray-300">
          1. 点击右上角「...」图标<br>
          2. 选择「转发」选项<br>
          3. 分享给好友或群聊
        </p>
      </div>
      <div class="modal-footer justify-center">
        <button class="btn-primary" id="confirmShareTipBtn">我知道了</button>
      </div>
    </div>
  </div>

  <!-- 重复点赞提示弹窗 -->
  <div class="modal-overlay" id="repeatTipModal">
    <div class="modal-container">
      <div class="modal-header">
        <h3 class="font-bold text-base">温馨提示</h3>
        <button class="text-gray-300 hover:text-white" id="closeRepeatTipModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body text-center py-4">
        <i class="fa fa-info-circle text-secondary text-2xl mb-3"></i>
        <p>今天您已经点过赞了，请明天再来吧</p>
      </div>
      <div class="modal-footer justify-center">
        <button class="btn-primary" id="confirmRepeatTipBtn">我知道了</button>
      </div>
    </div>
  </div>

  <!-- 重复评分提示弹窗 -->
  <div class="modal-overlay" id="repeatScoreModal">
    <div class="modal-container">
      <div class="modal-header">
        <h3 class="font-bold text-base">温馨提示</h3>
        <button class="text-gray-300 hover:text-white" id="closeRepeatScoreModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body text-center py-4">
        <i class="fa fa-info-circle text-secondary text-2xl mb-3"></i>
        <p>您已经评过分了，同一作品同一身份只能评分一次</p>
      </div>
      <div class="modal-footer justify-center">
        <button class="btn-primary" id="confirmRepeatScoreBtn">我知道了</button>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取DOM元素
      const scoreModal = document.getElementById('scoreModal');
      const closeModal = document.getElementById('closeModal');
      const cancelBtn = document.getElementById('cancelBtn');
      const nextConfirmBtn = document.getElementById('nextConfirmBtn'); // 下一步按钮
      const scoreInput = document.getElementById('scoreInput');
      const modalTitle = document.getElementById('modalTitle');
      const modalNote = document.getElementById('modalNote');
      
      // 二次确认弹窗元素
      const scoreConfirmModal = document.getElementById('scoreConfirmModal');
      const closeScoreConfirmModal = document.getElementById('closeScoreConfirmModal');
      const goBackBtn = document.getElementById('goBackBtn');
      const finalConfirmBtn = document.getElementById('finalConfirmBtn');
      const confirmScoreDisplay = document.getElementById('confirmScoreDisplay');
      
      let currentScoreType = ''; // 记录当前是学生评分还是教师评分
      let currentScoreElement = null; // 记录当前操作的评分元素
      let currentScoreValue = 0; // 记录当前输入的评分值
      
      // 评分提交状态标记
      let studentScoreSubmitted = false; // 学生评分是否已提交
      let teacherScoreSubmitted = false; // 教师评分是否已提交
      
      // 获取重复评分提示弹窗元素
      const repeatScoreModal = document.getElementById('repeatScoreModal');
      const closeRepeatScoreModal = document.getElementById('closeRepeatScoreModal');
      const confirmRepeatScoreBtn = document.getElementById('confirmRepeatScoreBtn');
      
      // 导航栏切换效果
      const navItems = document.querySelectorAll('.nav-item');
      navItems.forEach(item => {
        item.addEventListener('click', function() {
          navItems.forEach(nav => nav.classList.remove('active'));
          this.classList.add('active');
        });
      });
      
      // 返回按钮事件
      document.querySelector('.fa-arrow-left').parentElement.addEventListener('click', function(e) {
        e.preventDefault();
        window.history.back();
      });
      
      // 点赞功能（含验证码验证 + 当日重复点赞提示）
      const likeBtn = document.getElementById('likeBtn');
      const verifyModal = document.getElementById('verifyModal');
      const closeVerifyModal = document.getElementById('closeVerifyModal');
      const cancelVerifyBtn = document.getElementById('cancelVerifyBtn');
      const confirmVerifyBtn = document.getElementById('confirmVerifyBtn');
      const verifyCodeInput = document.getElementById('verifyCodeInput');
      const verifyCodeBox = document.getElementById('verifyCodeBox');
      const refreshVerifyCodeBtn = document.getElementById('refreshVerifyCode');
      const verifyError = document.getElementById('verifyError');
      const repeatTipModal = document.getElementById('repeatTipModal');
      
      // 重复点赞提示弹窗关闭事件
      const closeRepeatTipModal = document.getElementById('closeRepeatTipModal');
      const confirmRepeatTipBtn = document.getElementById('confirmRepeatTipBtn');
      
      const closeRepeatTipFunc = () => repeatTipModal.classList.remove('active');
      
      closeRepeatTipModal.addEventListener('click', closeRepeatTipFunc);
      confirmRepeatTipBtn.addEventListener('click', closeRepeatTipFunc);
      repeatTipModal.addEventListener('click', function(e) {
        if (e.target === this) {
          closeRepeatTipFunc();
        }
      });
      
      let liked = false; // 标记是否已点赞（当日有效）
      let likeCount = 8542;
      let currentVerifyCode = ''; // 存储当前有效验证码

      // 生成随机4位验证码（数字+字母混合）
      function generateVerifyCode() {
        const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let code = '';
        for (let i = 0; i < 4; i++) {
          code += chars[Math.floor(Math.random() * chars.length)];
        }
        currentVerifyCode = code;
        verifyCodeBox.textContent = code;
        // 清空输入框和错误提示
        verifyCodeInput.value = '';
        verifyError.classList.add('hidden');
      }

      // 打开验证码弹窗
      function openVerifyModal() {
        generateVerifyCode(); // 生成初始验证码
        verifyModal.classList.add('active');
        // 自动聚焦输入框
        setTimeout(() => {
          verifyCodeInput.focus();
        }, 300);
      }

      // 关闭验证码弹窗
      function closeVerifyModalFunc() {
        verifyModal.classList.remove('active');
        verifyError.classList.add('hidden');
      }

      // 点赞按钮点击事件
      likeBtn.addEventListener('click', function() {
        // 已点赞状态：显示“当日重复点赞”提示
        if (liked) {
          repeatTipModal.classList.add('active');
          return;
        }
        // 未点赞状态：弹出验证码
        openVerifyModal();
      });

      // 验证码确认按钮事件
      confirmVerifyBtn.addEventListener('click', function() {
        const inputCode = verifyCodeInput.value.trim().toUpperCase();
        // 验证验证码
        if (inputCode === currentVerifyCode) {
          // 验证码正确：完成点赞，锁定当日状态
          likeCount++;
          liked = true; // 标记为已点赞，当日不可重复
          likeBtn.classList.add('active');
          likeBtn.querySelector('.action-text').textContent = `点赞 (${likeCount})`;
          closeVerifyModalFunc();
        } else {
          // 验证码错误：显示提示并刷新验证码
          verifyError.classList.remove('hidden');
          generateVerifyCode();
        }
      });

      // 验证码弹窗关闭事件
      closeVerifyModal.addEventListener('click', closeVerifyModalFunc);
      cancelVerifyBtn.addEventListener('click', closeVerifyModalFunc);
      verifyModal.addEventListener('click', function(e) {
        if (e.target === this) {
          closeVerifyModalFunc();
        }
      });

      // 刷新验证码事件
      refreshVerifyCodeBtn.addEventListener('click', generateVerifyCode);
      
      // 转发功能（提示微信转发）
      const shareBtn = document.getElementById('shareBtn');
      const shareTipModal = document.getElementById('shareTipModal');
      const closeShareTipModal = document.getElementById('closeShareTipModal');
      const confirmShareTipBtn = document.getElementById('confirmShareTipBtn');
      
      // 打开转发提示弹窗
      shareBtn.addEventListener('click', function() {
        shareTipModal.classList.add('active');
      });
      
      // 关闭转发提示弹窗
      function closeShareTipFunc() {
        shareTipModal.classList.remove('active');
      }
      
      closeShareTipModal.addEventListener('click', closeShareTipFunc);
      confirmShareTipBtn.addEventListener('click', closeShareTipFunc);
      shareTipModal.addEventListener('click', function(e) {
        if (e.target === this) {
          closeShareTipFunc();
        }
      });
      
      // 关闭重复评分提示弹窗的函数
      function closeRepeatScoreModalFunc() {
        repeatScoreModal.classList.remove('active');
      }
      
      // 绑定重复评分提示弹窗的关闭事件
      closeRepeatScoreModal.addEventListener('click', closeRepeatScoreModalFunc);
      confirmRepeatScoreBtn.addEventListener('click', closeRepeatScoreModalFunc);
      repeatScoreModal.addEventListener('click', function(e) {
        if (e.target === this) {
          closeRepeatScoreModalFunc();
        }
      });
      
      // 打开评分弹窗（先判断是否已提交）
      function openScoreModal(type, element) {
        // 判断当前身份的评分是否已提交
        if ((type === 'student' && studentScoreSubmitted) || (type === 'teacher' && teacherScoreSubmitted)) {
          repeatScoreModal.classList.add('active'); // 已提交则弹出提示
          return;
        }
        
        currentScoreType = type;
        currentScoreElement = element;
        
        // 设置弹窗标题
        modalTitle.textContent = `${type === 'student' ? '学生' : '教师'}评分`;
        
        // 设置提示信息
        modalNote.textContent = `提示：每个${type === 'student' ? '学生' : '教师'}只能为同一作品评分一次`;
        
        // 获取当前评分并设置到输入框
        const currentScoreText = element.parentElement.textContent.trim();
        const currentScore = parseFloat(currentScoreText.replace(`${type === 'student' ? '学生评分: ' : '教师评分: '}`, ''));
        scoreInput.value = currentScore;
        currentScoreValue = currentScore;
        
        // 显示弹窗（带动画）
        scoreModal.classList.add('active');
        
        // 自动聚焦输入框
        setTimeout(() => {
          scoreInput.focus();
        }, 300);
      }
      
      // 关闭评分弹窗
      function closeScoreModal() {
        scoreModal.classList.remove('active');
      }
      
      // 学生评分编辑
      document.getElementById('editStudentScore').addEventListener('click', function() {
        openScoreModal('student', this);
      });
      
      // 教师评分编辑
      document.getElementById('editTeacherScore').addEventListener('click', function() {
        openScoreModal('teacher', this);
      });
      
      // 关闭弹窗事件
      closeModal.addEventListener('click', closeScoreModal);
      cancelBtn.addEventListener('click', closeScoreModal);
      
      // 点击弹窗外部关闭
      scoreModal.addEventListener('click', function(e) {
        if (e.target === this) {
          closeScoreModal();
        }
      });
      
      // 监听评分输入变化
      scoreInput.addEventListener('input', function() {
        const value = parseFloat(this.value) || 0;
        currentScoreValue = value;
      });
      
      // 点击下一步，进入二次确认
      nextConfirmBtn.addEventListener('click', function() {
        const newScore = currentScoreValue;
        
        // 验证评分
        if (isNaN(newScore) || newScore < 1 || newScore > 100) {
          alert('请输入1-100之间的有效评分');
          return;
        }
        
        // 更新二次确认弹窗的显示内容
        confirmScoreDisplay.textContent = `${currentScoreType === 'student' ? '学生评分' : '教师评分'}: ${newScore.toFixed(1)}`;
        
        // 关闭评分输入弹窗，打开二次确认弹窗
        closeScoreModal();
        scoreConfirmModal.classList.add('active');
      });
      
      // 二次确认弹窗关闭事件
      closeScoreConfirmModal.addEventListener('click', function() {
        scoreConfirmModal.classList.remove('active');
      });
      
      // 返回修改按钮
      goBackBtn.addEventListener('click', function() {
        scoreConfirmModal.classList.remove('active');
        scoreModal.classList.add('active');
      });
      
      // 点击弹窗外部关闭
      scoreConfirmModal.addEventListener('click', function(e) {
        if (e.target === this) {
          scoreConfirmModal.classList.remove('active');
        }
      });
      
      // 最终确认提交评分
      finalConfirmBtn.addEventListener('click', function() {
        const newScore = currentScoreValue;
        
        // 更新显示的评分
        currentScoreElement.parentElement.innerHTML = `
          <i class="fa ${currentScoreType === 'student' ? 'fa-users' : 'fa-graduation-cap'} text-secondary mr-1"></i>
          ${currentScoreType === 'student' ? '学生评分' : '教师评分'}: ${newScore.toFixed(1)}
          <span class="edit-btn" data-type="${currentScoreType}" id="edit${currentScoreType === 'student' ? 'Student' : 'Teacher'}Score">
            <i class="fa fa-pencil"></i>
          </span>
        `;
        
        // 标记当前身份的评分已提交
        if (currentScoreType === 'student') {
          studentScoreSubmitted = true;
        } else {
          teacherScoreSubmitted = true;
        }
        
        // 重新绑定事件
        const newEditBtn = document.getElementById(`edit${currentScoreType === 'student' ? 'Student' : 'Teacher'}Score`);
        newEditBtn.addEventListener('click', function() {
          openScoreModal(currentScoreType, this);
        });
        
        // 关闭二次确认弹窗
        scoreConfirmModal.classList.remove('active');
      });
      
      // 视频播放按钮点击效果
      const videoPlayButtons = document.querySelectorAll('.video-placeholder button');
      videoPlayButtons.forEach(button => {
        button.addEventListener('click', function() {
          alert('视频开始播放');
        });
      });
      
      // 评论点赞功能
      document.querySelectorAll('.comment-item .fa-thumbs-up').forEach(icon => {
        icon.parentElement.addEventListener('click', function() {
          let countText = this.textContent.trim();
          let count = parseInt(countText.split(' ')[1]);
          
          if (this.classList.contains('text-secondary')) {
            count--;
            this.classList.remove('text-secondary');
          } else {
            count++;
            this.classList.add('text-secondary');
          }
          
          this.innerHTML = `<i class="fa fa-thumbs-up mr-1"></i> ${count}`;
        });
      });
    });
  </script>
</body>
</html>